<template>
    <div>
        <div class="close"><img @click="closefn" src="../../assets/img/photo-cancelBtn.png" alt=""></div>
        <div class="xqbox">

            <div id="joinDetailContent">
                <div class="playerInfo">
                    <img class="headImg" :src="resobj.TX">
                    <div class="voteNo"><span class="numeber">{{resobj.BH}}</span>号</div>
                    <div>
                        <p class="joinName">{{resobj.XM}}</p>
                        <p class="voteNum"><span>{{resobj.TPS}}</span>票</p>
                    </div>
                </div>
                <p class="playerIntroduce">大家好，我是{{resobj.XM}}，请大家给我投上宝贵的一票吧！(づ￣ 3￣)づ</p>
                <div class="playerJoinImage">
                    <div class="joinImage" v-for="(item,index) in resobj.ZP" :key="index"><img style="width:100%" :src="item.IMG"></div>
                </div>
            </div>

        </div>
        <div id="bottomTab" style="display: block;">
            <div v-if="resobj.STATUS==1" class="share hide" style="display: block;">
                <div @click="mslpfn1" id="shareJoin">马上拉票</div>
                <div v-if="resobj.voteButton" @click="toupiaofn" id="vote">投票</div>
            </div>
            <div v-else-if="resobj.STATUS==2" class="share hide">
                <div id="shareJoin">{{resobj.REASON}}</div>
                <div id="red" @click="goUpdate">修改信息</div>
            </div>
            <div v-else class="share hide">
                <div id="shareJoin">该作品正在审核中</div>
                <div id="red" @click="goUpdate">修改信息</div>
            </div>
            <!-- <div>
        <div class="checkMsgBox hide" style="display: block;"></div>
        <div class="changeMsgBtn hide" style="display: block;"></div>
      </div> -->
        </div>

        <!-- 弹出窗口 -->
        <div>
            <x-dialog :show.sync="show2" class="dialog-demo">
                <div class="img-box">
                    <!-- 二维码 -->
                    <!-- 长按保存到相册，分享给朋友吧！ -->
                    <img :src="fximg" alt="">
                    <div :style="{height:'0px', overflow:'hidden'}">
                        <img ref="ewmbg" src="../../assets/img/szpewm.jpg" alt="">
                        <div class="qrcode" ref="qrcodeurl" id="qrcode">
                        </div>
                    </div>

                    <!-- <img src="https://ws1.sinaimg.cn/large/663d3650gy1fq6824ur1dj20ia0pydlm.jpg" style="max-width:100%"> -->
                </div>
                <div @click="show2=false">
                    <span class="vux-close"></span>
                </div>
            </x-dialog>
        </div>
    </div>
</template>

<script>
import api from "@/api/api";
import { Toast, MessageBox } from "mint-ui";
import { XDialog } from "vux";
import { log, debug } from "util";
import { setTimeout } from "timers";
export default {
  data() {
    return {
      csmc: "",
      lpxy: "",
      xm: "",
      lxdh: "",
      show2: false,
      fximg: "", //分享图片
      fxtpimg:'',//分享图片
      oldtext:'',
      fxbgimg: "",
      userid: "",
      id: "",
      resobj: {}
    };
  },
  methods: {
    // 修改
    goUpdate() {
      let id = this.$route.params.id;
      this.$router.push({path: '/baskphoto/releaseupdate', query: {id: id}});
    },
    //关闭页面
    closefn() {
      window.history.back();
      this.$emit("footnavzt", true);
    },
    // 投票
    toupiaofn() {
      let that = this;
      let userid = '';
      var userinfo = JSON.parse(sessionStorage.getItem("userinfo"));
      
      userid = userinfo.openid;
      let voteId = this.$route.params.id;
      api.photoVote(that, userid, voteId, function(res) {
        let data = res.data;
        console.log(data, "晒照片-投票");
        if (data.code == 0) {
          let data1 = JSON.parse(data.data);
          if (data1.code == 0) {
            that.resobj.TPS++;
            MessageBox({
              title: "提示",
              message: "恭喜您投票成功",
              showCancelButton: false
            });
          } else {
            MessageBox({
              title: "提示",
              message: data1.msg,
              showCancelButton: false
            });
          }
        } else {
          that.Toastfn(data.msg, 2000, "");
        }
      });
    },
    //弹出分享框
    mslpfn1() {
          this.show2 = true; //显示弹出框
    },
    //弹出分享
    mslpfn() {
      let that = this;
    
      var ewmurl = this.$refs.qrcodeurl.getElementsByTagName("img")[0].src;
      console.log(this.$refs.qrcodeurl.getElementsByTagName("img"), "999");
      console.log(
        this.$refs.qrcodeurl.getElementsByTagName("img")[0].src,
        "999"
      );
      // 生成二维码开始
      var data = [
          {
            x: 0,
            y: 165,
            w: 290,
            h: 145,
            url: this.fxbgimg
          },
          {
            x: 30,
            y: 180,
            w: 110,
            h: 110,
            url: ewmurl
          },
          {
            x: 20,
            y: 30,
            w: 125,
            h: 125,
            url: this.fxtpimg
          }
        ],
        base64 = [],
        // oldtext = this.oldtext;
        text = [];

      var c = document.createElement("canvas"),
        ctx = c.getContext("2d"),
        len = data.length;
      c.width = 290;
      c.height = 320;
      ctx.rect(0, 0, c.width, c.height);
      ctx.fillStyle = "#fff";
      ctx.fillRect(0, 0, c.width, c.height);
      function drawing(n) {
        if (n < len) {
          var img = new Image();
          img.crossOrigin = "Anonymous"; //解决跨域
          img.src = data[n].url;
          img.onload = function() {
            ctx.drawImage(img, data[n].x, data[n].y, data[n].w, data[n].h);
            drawing(n + 1); //递归
          };
        } else {
          //保存生成作品图片
          base64.push();
          //alert(JSON.stringify(base64));
          that.fximg = c.toDataURL("image/jpeg", 1);
        }
      }
      drawing(0);
      ctx.fillStyle = "#000000";
      ctx.font = "14px sans-serif";
      var temparr = this.oldtext.split("");

      var a1 = "";
      var b1 = "";
      var c1 = "";
      var d1 = "";
      for (var i = 0; i < temparr.length; i++) {
        if (i < 8) {
          a1 += temparr[i];
          text[0] = a1;
        } else if (i < 16) {
          b1 += temparr[i];
          text[1] = b1;
        } else if (i < 24) {
          c1 += temparr[i];
          text[2] = c1;
        } else if (i < 32) {
          d1 += temparr[i];
          text[3] = d1;
        }
      }
      for (var i = 0; i < text.length; i++) {
        ctx.fillText(text[i], 160, 30 + 18 * (i + 1));
      }
      //生成二维码结束
    },
    // toupiaofn() {
    //   MessageBox({
    //     title: "提示",
    //     message: "投票成功",
    //     showCancelButton: true
    //   });
    // },
    // 提示函数
    Toastfn(message, duration, position) {
      Toast({
        message: message,
        duration: duration,
        position: position
      });
    }
  },
  mounted() {
    let that = this;
    var userinfo = JSON.parse(sessionStorage.getItem("userinfo"));
    if (userinfo && userinfo.vipcode) {
      let userid = userinfo.vipcode;
      this.userid = userid;
    } 
    // else {
    //   Toast({
    //     message: "您还不是会员，快去注册吧！",
    //     duration: 1600
    //   });
    //   setTimeout(function() {
    //     that.$router.push({ path: "/register", query: { type: "sign" } });
    //   }, 1600);
    //   return false;
    // }
    // localStorage.setItem("footnavselected", 2);
    this.$emit("footnavzt", false); //隐藏底部栏
    let userId = this.userid;
    let id = this.$route.params.id;
    api.photoInfo(that, userId, id, function(res) {
      let data = res.data;
      console.log(data, "晒照片-详情");
      if (data.code == 0) {
        let zplist = data.data.ZP;
        for (let i = 0; i < zplist.length; i++) {
          // 处理图片
          zplist[i].IMG = that.host.filehost + zplist[i].ID;
        }
        // console.log(zplist,'照片列表');
        that.resobj = data.data;
        that.oldtext = data.data.CSMC
        that.fxtpimg = data.data.ZP[0].IMG
        that.mslpfn()
      } else {
        that.Toastfn(data.msg, 2000, "");
      }
    });
    let pageurl = location.href;
    // 生成二维码
    this.$nextTick(function() {
      let qrcode = new QRCode(document.getElementById("qrcode"), {
        text: pageurl,
        width: 128,
        height: 128,
        colorDark: "#000000",
        colorLight: "#ffffff"
      });
    });
    // 生成二维码结束
    this.fxbgimg = this.$refs.ewmbg.src;
  },
  components: {
    XDialog
  }
};
</script>

<style scoped lang="less">
.close {
  height: 40px;
  position: relative;
  margin-top: 0.4rem;
  img {
    position: absolute;
    right: 0.2rem;
    width: 40px;
    background-color: transparent;
  }
}
.xqbox {
  background-color: #ffffff;
  margin: 0.2rem;
  overflow: hidden;
  padding: 0.2rem;
  margin-bottom: 70px;
}
#joinDetailContent {
  background-color: #fff;
  // padding: 0.15rem 0.2rem 0.4rem 0.2rem;
  .playerInfo {
    position: relative;
    .headImg {
      width: 1.35rem;
      height: 1.35rem;
      border-radius: 50% 50%;
    }
    .voteNo {
      top: 0.25rem;
    }
    div {
      position: absolute;
      width: 100%;
      top: 0.7rem;
      font-size: 0.35rem;
      color: #666;
      padding-left: 1.5rem;
      box-sizing: border-box;
    }
    .joinName {
      display: inline-block;
    }
    .voteNum {
      float: right;
      color: #ff4040;
    }
  }
  .playerIntroduce {
    font-size: 0.35rem;
    color: #9a9a9a;
    margin-top: 0.1rem;
  }
  .playerIntroduce {
    font-size: 0.32rem;
    color: #9a9a9a;
    margin-top: 0.1rem;
  }
  .playerJoinImage {
    .joinImage {
      margin-top: 0.2rem;
      overflow: hidden;
      background-color: transparent;
    }
  }
}
// 详情底部栏
#bottomTab {
  width: 100%;
  height: 1.1rem;
  border-top: 1px solid #dadada;
  font-size: 0.22rem;
  position: fixed;
  bottom: 0rem;
  background-color: #fff;
  cursor: pointer;
  z-index: 600;
  .tab {
    padding-top: 0.13rem;
  }
  .bottomItem {
    float: left;
    width: 25%;
    height: 100%;
    text-align: center;
    color: #666;
    overflow: hidden;
  }
  #homeTab {
    .bottomIcon {
      display: inline-block;
      width: 0.5rem;
      height: 0.5rem;
      background-size: cover;
    }
    .bottomItem {
      float: left;
      width: 25%;
      height: 100%;
      text-align: center;
      color: #666;
      overflow: hidden;
    }
  }
  .share {
    font-size: 0.35rem;
    line-height: 1.05rem;
    color: #15a1f1;
    padding: 0 0.55rem;
    #shareJoin {
      float: left;
    }
    #vote {
      float: right;
    }
    #red {
      float: right;
      color: #ff4040;
    }
  }
}
@import "~vux/src/styles/close";

.dialog-demo {
  .weui-dialog {
    border-radius: 8px;
    padding-bottom: 8px;
  }
  .dialog-title {
    line-height: 30px;
    color: #666;
  }
  .img-box {
    height: 350px;
    overflow: hidden;
  }
  .vux-close {
    margin-top: 8px;
    margin-bottom: 8px;
  }
}
</style>
